<template>
  <div class="container">
    <h3>路径别名引入图片[本地]</h3>
    <img class="mt-20" src="~img/qingwa.png" style="width: 200px" />
    <img class="mt-20" src="~img/dlam.png" style="width: 200px" />
    <h3 class="mt-20">路径别名引入图片[网络]</h3>
    <img
      class="mt-20"
      src="https://img0.baidu.com/it/u=408746067,3266075983&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      style="width: 200px" />
    <img
      class="mt-20"
      src="https://img1.baidu.com/it/u=3762998275,2618077829&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      style="width: 200px" />
    <!-- 全局指令 -->
    <p class="mt-20">
      <el-link v-dir:global-dir="dirFun" type="primary">全局指令[点击执行]</el-link>
    </p>
    <!-- 全局指令 -->
    <p class="mt-20 font-s-14 vbind">CSS 中的 v-bind()</p>
  </div>
</template>

<script setup>
definePageMeta({
  alias: '/home' // 路由别名
})

// 在页面中定制 head
useHead({
  title: '首页',
  meta: [
    { name: 'description', content: '首页自定义的 meta' },
    { hid: 'abc', name: 'description', content: '覆盖全局的 meta [hid:abc]' }
  ]
})

const dirFun = () => {
  console.log('🎨 >>> 全局自定义指令')
}

onMounted(() => {
  // 使用 plugins 自动提供的辅助函数
  const { $hello } = useNuxtApp()
  $hello('nuxt3')
})

const col = ref('#48a2ff')
</script>

<style lang="scss" scoped>
.vbind {
  color: v-bind(col);
}
</style>
